<template>
	<view class="container">
		<view style="width: 100%;height: var(--status-bar-height)"></view>
		<view class="content col_between">
			<view class="head col_center">
				<image class="img" src="../../static/img/logo.png" mode="heightFix"></image>
				<view class="title">{{$t('会员登录')}}</view>
			</view>
			<u-transition :show="true" mode="slide-right" duration="500">
				<view class="button flex_center" @tap="login">
					<image src="../../static/img/button.png" mode="widthFix" style="width: 44rpx;height: 44rpx;">
					</image>
					<view class="button_text">{{$t('会员登录')}}</view>
				</view>
			</u-transition>
			<view class="option flex_between">
				<view class="opt_item" @tap="toPath('/pages/register/register')">{{$t('注册会员')}}</view>
				<!-- <view class="opt_item" @tap="toPath('/pages/forget/forget')">{{$t('忘记密码')}}</view> -->
				<view class="copyright">
					Version number:1.15.1.2
				</view>
			</view>
		</view>
		<view class="serve_box col_center" @tap="openServe">
			<view class="serve flex_center">
				<u-icon name="kefu-ermai" color="#fff" size="28"></u-icon>
			</view>
			<view class="text">{{$t('联系客服')}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			openServe() {
				console.log("打开客服")
			},
			login() {
				uni.navigateTo({
					url: "/pages/login/index"
				})
			},
			toPath(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		padding-bottom: 0;

		.content {
			flex: 1;

			.head {
				width: 100%;
				height: 800rpx;

				.img {
					height: 190rpx;
				}

				.title {
					font-size: 44rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #fff;
					margin-top: 22rpx;
				}
			}

			.button {
				margin-bottom: 44rpx;
				height: 110rpx;
				background: #4c3d89;
				border-radius: 54rpx;
				margin: 0 74rpx;

				.button_text {
					padding-left: 36rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #fff;
				}
			}

			.option {
				padding: 0 80rpx 50rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #fff;
				flex-wrap: wrap;

				.opt_item {
					height: 80rpx;
					line-height: 80rpx;
				}

				.copyright {
					width: 100%;
					font-size: 28rpx;
					font-weight: 500;
					color: grey;
					text-align: right;
				}
			}
		}

	}

	.serve_box {
		position: fixed;
		top: 60rpx;
		right: 40rpx;

		.serve {
			background: #a5a5a5;
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
		}

		.text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fff;
			margin-top: 6rpx
		}
	}
</style>